<template>
    <div class="dzyj-wrapper">
        <!-- <img src="/src/assets/img/module-building.jpg" style="width:800px;margin-left:50%;transform:translateX(-50%)" alt="模块建设中"> -->
        <hg-tab @change="changeTab" class="f-l dzyj-tab" direction="vertical" :list="tabs"></hg-tab>
        <div class="content-box">
            <component @inbox-detail="inboxDetail" @outbox-detail="outboxDetail" :is="activeTab"></component>
        </div>
        <div class="clear-float"></div>
    </div>
</template>

<script>
import hgTab from '../../common/hgTab.vue'
import inbox from './inbox.vue'
import outbox from './outbox.vue'
import writebox from './writebox.vue'
import inboxdetail from './inboxdetail.vue'
import outboxdetail from './outboxdetail.vue'

export default {
    name: 'dzyj',
    data: function() {	
        return {
            tabs:[
                {
                    icon:"inbox",
                    label:"收件箱",
                    value:"inbox"
                },
                {
                    icon:"envelope-open",
                    label:"发件箱",
                    value:"outbox"
                },
                {
                    icon:"pencil",
                    label:"写邮件",
                    value:"writebox"
                },
            ],
            activeTab: ''
        }
    },
    components: {
        hgTab,
        inbox,
        outbox,
        writebox,
        inboxdetail,
        outboxdetail
    },
    methods: {
        changeTab(val){
            this.activeTab = val
        },
        inboxDetail(val){
            // alert(val)
            this.activeTab = 'inboxdetail'
        },
        outboxDetail(val){
            // alert(val)
            this.activeTab = 'outboxdetail'
        }
    }
}
</script>

<style lang="scss">
.dzyj-wrapper{
    min-height: 138px;
    // padding: 20px;
    .dzyj-tab{
        margin: 10px 0 0 10px;
    }
    .content-box{
        // border: 1px solid #ccc;
        float: right;
        height: 100%;
        // float: right;
        // display: inline-block;
        width: 1070px;
        // margin-left: 10px
    }
}
</style>